// 引入useEffect
// useEffect的作用: 模拟类组件中的挂载, 更新和卸载三个钩子
import React, { useEffect, useState } from 'react'
import Test from './Test'
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值
}
export default function App() {
  const [c, setC] = useState(0)
  useEffect(() => {
    // 这个函数模拟了两个生命周期钩子: 分别是挂载和更新
    console.log('挂载或更新')
    // const timeid = setInterval(() => {
    //   console.log('定时器执行了')
    // }, 2000)
    return () => {
      // 这个函数模拟了一个生命周期钩子: 卸载
      console.log('卸载')
      // clearInterval(timeid)
    }
    // 如果不传入第二个参数,外层模拟挂载或更新,内部模拟卸载. 并且更新之前,会先执行卸载,预防创建多次定时器等操作
    // 如果传入第二个参数,但是是空数组,则外层只模拟挂载,内部还是卸载(最常用)
    // 如果传入第二个参数,并在第二个参数的数组中,传入state或props数据,则useEffect会监视我们的传入的数据,当传入某个数据变化变化,则外层模拟更新,当传入的数据都没有变化,则外层不模拟更新
  }, [c])
  return (
    <div>
      App
      <p>{c}</p>
      <button
        onClick={() => {
          setC(getRandomIntInclusive(1, 2))
        }}
      >
        +
      </button>
      {/* {c === 0 && <Test></Test>} */}
    </div>
  )
}
